<template>
  <div class="container-fluid w-75 mx-auto pt-5">
    <h1 class="mb-4 text-center text-danger">任务列表案例</h1>
    <div class="row align-items-center">
      <!-- 全选 -->
      <div class="col-auto">
        <div class="form-check">
          <input
            v-model="checkedAll"
            class="form-check-input"
            type="checkbox"
            value=""
            id="allCheck"
          />
          <label class="form-check-label" for="allCheck"> 全选 </label>
        </div>
      </div>

      <!-- 输入待办 -->
      <div class="col">
        <input
          @keyup.enter="add()"
          v-model="text"
          class="form-control"
          type="text"
          placeholder="请输入待办事项，按回车添加"
          aria-label="todo input"
        />
      </div>
    </div>

    <ul class="list-group mt-4">
      <div v-show="item.show" :key="item.id" v-for="item in list">
      <li
        class="list-group-item d-flex justify-content-between" >
        <div   class="form-check d-inline-block">
          <input
            v-model="item.done"
            class="form-check-input"
            type="checkbox"
            id="flexCheckDefault"
          />
          <label
            class="form-check-label"
            :class="{ 'text-decoration-line-through': item.done }"
            for="flexCheckDefault"
            >{{ item.html }}</label
          >
        </div>

        <button
          @click="del(item.id)"
          class="btn-close"
        ></button>
      </li></div>
    </ul>

    <div class="d-flex mt-2 justify-content-between align-items-center">
      <span>剩余{{iNum}}个</span>

      <ul class="nav nav-pills">
        <li class="nav-item">
          <button @click="all()" :class="{'active':active==='all'}" class="nav-link ">全部</button>
        </li>
        <li class="nav-item">
          <button @click="incomplete()" :class="{'active':active==='incomplete'}" class="nav-link">未完成</button>
        </li>
        <li class="nav-item">
          <button @click="done()" :class="{'active':active==='done'}" class="nav-link">已完成</button>
        </li>
      </ul>

      <button type="button" @click="del()" class="btn btn-danger">
        清除已完成
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active:localStorage.getItem('active')?JSON.parse(localStorage.getItem('active')):'all',
      text: "",
      list: localStorage.getItem("list")
        ? JSON.parse(localStorage.getItem("list"))
        : [],
    };
  },

  methods: {
    incomplete() {
      this.active='incomplete'
      this.list.forEach((v) => {
        v.show = !v.done;
      });
      this.list.push({});
      this.list.pop();
    },
    done() {
      this.active='done'
      this.list.forEach((v) => (v.show = v.done));
    },
    add() {
      const obj = {
        id: this.list.length > 0 ? this.list[this.list.length - 1].id + 1 : 1,
        html: this.text,
        done: false,
        show: true,
      };
      this.list.push(obj);
      this.text = "";
    },
    all() {
      this.active='all'
      this.list.forEach((v) => (v.show = true));
    },
    del(id = "") {
      const index = this.list.findIndex((i) => i.id === id);
      if (index === -1) {
        this.list = this.list.filter((v) => v.done === false);
      } else {
        this.list.splice(index, 1);
      }
    },
  },

  watch: {
    list: {
      deep: true,
      handler(nv) {
        localStorage.setItem("list", JSON.stringify(nv));
      },
    },
    active(nv){
        localStorage.setItem("active", JSON.stringify(nv));

    }
  },

  computed: {
    checkedAll: {
      get() {
        return (
          this.list.filter((v) => v.done === true).length === this.list.length
        );
      },
      set(value) {
        this.list.forEach((v) => (v.done = value));
      },
    },
    iNum() {
      return this.list.filter((v) => !v.done).length;
    },
  },
};
</script>

<style></style>